{{define "title"}}{{if .interview.Id}}修改{{else}}发布{{end}}Go面试题 {{end}}
{{define "content"}}
<div class="row">
	<div class="col-md-9 col-sm-6">
		<div class="sep20"></div>

		<ol class="breadcrumb">
			<li><a href="/">首页</a></li>
			<li><a href="/interview/question">Go每日一题</a></li>
			<li class="active">{{if .interview.Id}}编辑{{else}}发布{{end}}</li>
		</ol>
		<div class="page box_white">
			<form class="form-horizontal validate-form" role="form" action="{{if .interview.Id}}/interview/modify{{else}}/interview/new{{end}}" data-redirect="/interview/question/{{if .interview.Id}}/{{.interview.ShowSn}}?r={{timestamp}}{{end}}">
				{{if .interview.Id}}
				<input type="hidden" name="id" value="{{.interview.Id}}" />
				{{end}}
				<div class="form-group form-group-sm">
					<label class="col-sm-1 control-label" for="source">来源</label>
					<div class="col-sm-11">
						<input id="source" class="form-control" name="source" value="{{.interview.Source}}" placeholder="该面试题来自哪里？">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-1 control-label" for="markdown-question">问题</label>
					<div class="col-sm-11">
						<div class="row clearfix md-toolbar">
							<ul class="col-md-10 list-inline">
								<li class="edit cur"><a href="#" tabindex="-1"><i class="glyphicon glyphicon-edit"></i> 编辑</a></li>
								<li class="preview"><a href="#" title="预览" tabindex="-1"><i class="glyphicon glyphicon-eye-open preview"></i> 预览</a></li>
							</ul>
						</div>
						<textarea class="form-control need-autogrow main-textarea" id="markdown-question" name="question" rows="15" tabindex="0">{{.interview.Question}}</textarea>
						<div class="content-preview"></div>
					</div>
				</div>

        <div class="form-group form-group-sm">
					<label class="col-sm-1 control-label" for="markdown-answer">答案</label>
					<div class="col-sm-11">
						<div class="row clearfix md-toolbar">
							<ul class="col-md-10 list-inline">
								<li class="edit cur"><a href="#" tabindex="-1"><i class="glyphicon glyphicon-edit"></i> 编辑</a></li>
								<li class="preview"><a href="#" title="预览" tabindex="-1"><i class="glyphicon glyphicon-eye-open preview"></i> 预览</a></li>
							</ul>
              <div class="col-md-2 text-right">
								<i id="upload-img" class="glyphicon glyphicon-picture upload-img tool-tip" data-toggle="tooltip" data-placement="top" title="上传图片"></i>
							</div>
						</div>
						<textarea class="form-control need-autogrow main-textarea" id="markdown-answer" name="answer" rows="15" tabindex="0">{{.interview.Answer}}</textarea>
						<div class="content-preview"></div>
					</div>
				</div>

				<div class="form-group form-group-sm cell">
					<div class="col-sm-6 col-sm-offset-5">
						<button type="submit" class="btn btn-success btn-sm" id="submit">{{if .interview.Id}}提交修改{{else}}发布题目{{end}}</button> (Ctrl/Command+Enter)
					</div>
				</div>

			</form>
		</div>
	</div>
	<div class="col-md-3 col-sm-6">
		<div class="sep20"></div>

		<div class="box_white sidebar sb-author">
			<div class="top">
				<h3 class="title"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;发题提示</h3>
			</div>
			<div class="sb-content">
				<span class="help-block">
					<ul>
						<li>
							<span class="f13">内容</span>
							<div class="sep10"></div>
							<div>可以在正文中为你要发布的主题添加更多细节。本站支持 Markdown 文本标记语法。</div>
							<div class="sep10"></div>
							<div>在正式提交之前，你应该在提交按钮下方查看 Markdown 正文的实际渲染效果。</div>
							<div class="sep10"></div>
							<span class="f13" style="font-weight: bold;">Markdown 格式说明</span>
							<div class="sep10"></div>
							<ul>
								<li>支持 Markdown 格式, <strong>**粗体**</strong>、~~删除线~~、<code>`单行代码`</code></li>
								<li>http://example.org 自动加链接</li>
								<li>代码支持高亮，如：```go func main() {}``` 则是Go语法高亮</li>
								<li><strong>@name</strong> 会链接到用户页面，并会通知他</li>
								<li>![alt 文本](http://foo.com/bar.jpg) 显示图片</li>
								<li>:smile: 支持 <strong>emoji 表情</strong>，见<a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji cheat sheet</a></li>
								<li>完整 Markdwon 语法说明：<a href="http://wowubuntu.com/markdown/" target="_blank">语法说明 (简体中文版)</a></li>
								<!-- <li>支持嵌入 Wide 的Playground 代码直接运行</li> -->
							</ul>
							<div class="sep10"></div>
							<div>图片支持拖拽、截图粘贴等方式上传。</div>
							<div class="sep10"></div>
						</li>
					</ul>
				</span>
			</div>
		</div>

	</div>
</div>
{{end}}
{{define "css"}}
{{include "cssjs/prism.css.html" .}}
{{end}}
{{define "js"}}

{{include "cssjs/prism.js.html" .}}
{{include "cssjs/publish.js.html" .}}

<script type="text/javascript">
// 需要加载的侧边栏
SG.SIDE_BARS = [];

(function(){
	emojify.setConfig({
		// emojify_tag_type : 'span',
		only_crawl_id    : null,
		img_dir          : SG.EMOJI_DOMAIN,
		ignored_tags     : { //忽略以下几种标签内的emoji识别
			'SCRIPT'  : 1,
			'TEXTAREA': 1,
			'A'       : 1,
			'PRE'     : 1,
			'CODE'    : 1
		}
	});
	
	SG.Interview = function(){}
	SG.Interview.prototype = new SG.Publisher();
	SG.Interview.prototype.parseContent = function(selector) {
		// 配置 marked 语法高亮
		marked = SG.markSettingNoHightlight();

		selector.each(function() {
			var markdownString = $(this).text();

			var contentHtml = marked(markdownString);

			// JS 处理，避免 XSS。最终还是改为服务端渲染更好
			if (contentHtml.indexOf('<script') != -1) {
				contentHtml = contentHtml.replace(/<script/g, '&lt;script');
			}
			if (contentHtml.indexOf('<form') != -1) {
				contentHtml = contentHtml.replace(/<form/g, '&lt;form');
			}
			if (contentHtml.indexOf('<input') != -1) {
				contentHtml = contentHtml.replace(/<input/g, '&lt;input');
			}
			if (contentHtml.indexOf('<select') != -1) {
				contentHtml = contentHtml.replace(/<select/g, '&lt;select');
			}
			if (contentHtml.indexOf('<textarea') != -1) {
				contentHtml = contentHtml.replace(/<textarea/g, '&lt;textarea');
			}

			contentHtml = SG.replaceCodeChar(contentHtml);
			
			$(this).html(contentHtml);

			// emoji 表情解析
			emojify.run(this);
		});
	}

	jQuery(document).ready(function($) {
    $('.need-autogrow').autoGrow();

		// 发布题目
		$('#submit').on('click', function(evt){
			evt.preventDefault();
			var validator = $('.validate-form').validate();
			if (!validator.form()) {
				return false;
			}

			var interview = new SG.Interview();
			interview.publish(this, function(data) {
				setTimeout(function(){
					if (data.id) {
						window.location.href = '/interview/question/'+data.show_sn;
					} else {
						window.location.href = '/interview/question';
					}
				}, 1000);
			});
		});

		$(document).keypress(function(evt){
			if (evt.ctrlKey && (evt.which == 10 || evt.which == 13)) {
				$('#submit').click();
			}
		});

	});

}).call(this);
</script>
{{end}}
